import React, { Component } from 'react'
import { Text, View, StyleSheet, Image } from 'react-native'

export default class MyTeam extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             userList:[]
        }
    }
    
    componentDidMount=()=>{
        var that = this
        fetch('https://www.annjong.com/bcumusic/api/user/getAll')
        .then(res=>res.json())
        .then(res=>{
            console.log(res.obj);
            that.setState({
                userList:res.obj
            })
        })
    }
    render() {
        return (
            <View>
                <View style={styles.main_box}>
                    {this.state.userList.map((user,index)=><View key={index} style={styles.user_Box}>
                        <View style={styles.img_box}>
                            <Image style={{width:'100%',height:160}} source={{uri:user.userImg}}></Image>
                        </View>
                        <Text>{user.username}</Text>
                    </View>
                    )}
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    img_box:{
        width:'100%',
        height:160,
        backgroundColor:'red'
    },
    user_Box:{
        width:'30%',
        height:180,
        backgroundColor:'white',
        marginTop:40,
        display:"flex",
        alignItems:'center',
    },
    main_box:{
        width:'90%',
        height:500,
        // backgroundColor:'blue',
        alignSelf:'center',
        marginTop:30,
        display:'flex',
        justifyContent:'space-around',
        flexDirection:'row',
        flexWrap:'wrap'
    },
})
